<template>
  <el-cascader
    class="com-address"
    :disabled="isreadonly"
    :options="options"
    :value="selectedOptions"
    filterable
    @change="handleChange"
    
    >
    {{getDefault}}
  </el-cascader>
</template>
<script>
import cities from './addressData.js'
export default {
  props:['isreadonly',"info",'prop'],
  components: {},
  name: "",
  data() {
    return {
      options:cities,
      selectedOptions:[],
    };
  },
  computed:{
    getDefault(){
      if(this.info){
        this.selectedOptions=this.info[this.prop]
      }
    }
  },
  methods: {
    handleChange(val){
      this.$emit('handleAddress',{key:this.prop,value:val})
    },

    getRightData(array){
      array.forEach(ele=>{
        if(!ele.value)ele.value=ele.label
        if(ele.children&&(typeof ele.children[0] !=='string')){
          this.getRightData(ele.children)
        }else if(ele.children&&(typeof ele.children[0] =='string')){
          var realChild=[]
          ele.children.forEach(ele1=>{
            realChild.push({label:ele1,value:ele1})
          })
          ele.children=realChild
        }
      })
    }
  },
  created() {
    this.$nextTick(()=>{
      this.getRightData(cities)
    })
  },
};
</script>
<style lang="scss" scoped>
.com-address {
  width: 100%;
  max-width: 350px;
}
</style>